<script setup lang="ts">
// 列信息- 标题 - 字段
// vue3.5+
type PersonItem = { id: number; username: string; age: number };

const { columns = [], data = [] } = defineProps<{
  columns?: Array<{ label: string; field: keyof PersonItem }>; // 列信息
  data?: Array<PersonItem>; // 数据
}>();
// keyof 对象
</script>

<template>
  <table border="1">
    <thead>
      <!-- [{ label: '中文',field: '英文字段' }] -->
      <th align="center" v-for="item in columns" :key="item.field">
        {{ item.label }}
      </th>
    </thead>
    <tbody>
      <tr v-for="(item, index) in data" :key="item.id">
        <!-- <td>{{ item[columns[0].field] }}</td>  =》 item["id"] item["username"] item["age"] -->
        <td>{{ item[columns[0].field] }}</td>
        <td>{{ item[columns[1].field] }}</td>
        <td>{{ item[columns[2].field] }}</td>
        <td>
          <!-- 操作 -->
          <slot name="row" :row="item"></slot>
          <!-- 循环了三次 <slot row={ 具体的数据 } > -->
        </td>
      </tr>
    </tbody>
  </table>
</template>

<style scoped>
table thead {
  background-color: #3972f6;
  color: #fff;
}

table thead th,
table td {
  width: 100px;
  text-align: center;
}
</style>
